<script setup lang="ts">
import { PivotTable, VTable } from '@visactor/vue-vtable'
import { downloadExcel, exportVTableToExcel } from '@visactor/vtable-export'
import { computeRate, formatRate } from '@/utils/common'

defineProps({
  records: Array<any>,
})

const pivotTableRef = ref<InstanceType<typeof PivotTable>>()

const options = {
  title: {
    text: '三率数据统计表-老师维度',
    align: 'center',
    padding: [0, 0, 20, 0],
    textStyle: {

    },
  },
  emptyTip: {
    text: '选择查询条件后点击搜索',
  },
  widthMode: 'autoWidth',
  heightMode: 'autoHeight',
  autoFillWidth: true,
  theme: VTable.themes.BRIGHT,
  hover: {
    highlightMode: 'row',
  },
  sortState: {
    field: 'renewalRate',
    order: 'desc',
  },
  rowHierarchyType: 'tree',
  rows: [
    // {
    //   dimensionKey: 'grade',
    //   title: '年级',
    //   headerStyle: {
    //     textStick: true,
    //   },
    //   // drillDown: true,
    //   headerFormat: value => useDictLabel('Grade', value),
    //   width: 'auto',
    // },
    {
      dimensionKey: 'leadTeacherName',
      title: '主讲老师',
      width: 'auto',
    },
    // {
    //   dimensionKey: 'className',
    //   title: '班级',
    //   width: 'auto',
    // },
  ],
  indicators: [
    {
      indicatorKey: 'plannedStudentCount',
      title: '班级限额',
      sort: true,
    },
    {
      indicatorKey: 'passedStudentCount',
      title: '在读人数',
      sort: true,
    },
    {
      indicatorKey: 'cancelStudentCount',
      title: '退费人数',
      sort: true,
    },
    {
      indicatorKey: 'renewalStudentCount',
      title: '续报人数',
      sort: true,
    },
    {
      indicatorKey: 'retainedStudentCount',
      title: '留存人数',
      sort: true,
    },
    {
      indicatorKey: 'fullRateComputed',
      title: '满班率',
      sort: true,
      format: formatRate,
    },
    {
      indicatorKey: 'renewalRateComputed',
      title: '续报率',
      sort: true,
      format: formatRate,
    },
    {
      indicatorKey: 'cancelRateComputed',
      title: '退费率',
      sort: true,
      format: formatRate,
    },
    {
      indicatorKey: 'retainedRateComputed',
      title: '留存率',
      sort: true,
      format: formatRate,
    },
  ],
  corner: {
    titleOnDimension: 'row',
    headerStyle: {
      textStick: true,
    },
  },
  dataConfig: {
    // 数据汇总规则
    totals: {
      row: {
        showGrandTotals: true,
        showSubTotals: true,
        subTotalsDimensions: ['leadTeacherName'],
        grandTotalLabel: '总计',
        subTotalLabel: '小计',
        // showGrandTotalsOnTop: false, // 汇总值显示在上
      },
    },
    // 排序规则
    sortRules: [
      // { sortField: 'leadTeacherName', sortType: 'ASC', sortByIndicator: 'fullRateComputed', query: '' },
      // { sortField: 'renewalRateComputed', sortType: 'ASC' },
    ],
    // 聚合方式
    aggregationRules: [

    ],
    // 派生字段
    derivedFieldRules: [
    ],
    // 透视表计算字段
    calculatedFieldRules: [
      {
        key: 'fullRateComputed',
        dependIndicatorKeys: ['passedStudentCount', 'plannedStudentCount'],
        calculateFun: dependValue => computeRate(dependValue.passedStudentCount, dependValue.plannedStudentCount),
      },
      {
        key: 'renewalRateComputed',
        dependIndicatorKeys: ['renewalStudentCount', 'passedStudentCount'],
        calculateFun: dependValue => computeRate(dependValue.renewalStudentCount, dependValue.passedStudentCount),
      },
      {
        key: 'cancelRateComputed',
        dependIndicatorKeys: ['cancelStudentCount', 'passedStudentCount'],
        calculateFun: dependValue => computeRate(dependValue.cancelStudentCount, dependValue.passedStudentCount + dependValue.cancelStudentCount),
      },
      {
        key: 'retainedRateComputed',
        dependIndicatorKeys: ['retainedStudentCount', 'cancelStudentCount', 'passedStudentCount'],
        calculateFun: dependValue => computeRate(dependValue.retainedStudentCount, dependValue.passedStudentCount + dependValue.cancelStudentCount),
      },
    ],
  },
}

const onExport = async () => {
  const excelOption = {
  }
  downloadExcel(await exportVTableToExcel(pivotTableRef.value.vTableInstance, excelOption), '三率数据统计表-老师维度')
}

defineExpose({ onExport })

onMounted(() => {
  const tableInstance = pivotTableRef.value.vTableInstance

  // tableInstance.on('pivot_sort_click', (event) => {
  //   console.log(event)
  //   if (!event.dimensionInfo || !event.dimensionInfo.length) {
  //     return
  //   }
  //   const indicatorKey = event.dimensionInfo[0].indicatorKey
  //   // tableInstance.updatePivotSortState({
  //   //   dimensions: event.dimensionInfo?.map(item => ({
  //   //     dimensionKey: item.dimensionKey,
  //   //     indicatorKey: item.indicatorKey,
  //   //     value: item.value,
  //   //   })),
  //   //   order: tableInstance.order,
  //   // })
  //   console.log('indicatorKey: ', indicatorKey)
  //   console.log({ tableInstance })
  //   console.log(tableInstance.options.sortState.order)
  //   // tableInstance.updateSortRules([{
  //   //   sortField: 'leadTeacherName',
  //   //   sortByIndicator: indicatorKey,
  //   //   // sortType: event.order,
  //   //   sortType: tableInstance.options.sortState.order,
  //   //   query: [''],
  //   //   // sortFunc: (a, b) => a[indicatorKey] - b[indicatorKey],
  //   // }])
  // })
})
</script>

<template>
  <PivotTable ref="pivotTableRef" :options="options" :records="records" />
</template>

<style scoped>

</style>
